<template>
    <view>
        <!--pages/hot/hot.ttml-->

        <scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="0">
            <view v-for="(item,index) in tabbar" :key="index" :class="'tab-bar-item ' + (currentTab == index ? 'active' : '')" :data-current="index" @click.stop.prevent="swichNav">
                <text class="tab-bar-title">{{ item }}</text>
            </view>
        </scroll-view>

        <view>
            
            <block v-if="posts.length > 0">
                <view class="jiangqie-timeline-view">
                    <view class="list-box data-v-0034d6f4">
                        <block v-for="(item,index) in posts" :key="index" :data-id="item.id" @click.native.stop.prevent="handlerHotArticle">
                            <image
                                :src="item.thumbnail"
                                mode="aspectFill"
                                class="image data-v-0034d6f4"
                                :index="index"
                                :data-id="item.id"
                                @click.stop.prevent="handlerHotArticle"
                            ></image>
                            
                        </block>
                    </view>

                    <!--加载loadding-->
                    <tui-loadmore :visible="loadding"></tui-loadmore>
                    <tui-nomore :visible="!pullUpOn"></tui-nomore>
                    <!--加载loadding-->
                </view>
            </block>
            <block v-else-if="loaded">
                
                <!-- parse <template is="jiangqie_nodata"/> -->
                <block name="jiangqie_nodata">
                    <view class="none_tip">
                        <image src="../../static/images/no-data.png" mode="widthFix"></image>
                        <view class="none_tip_text">
                            <text>什么也没有~</text>
                        </view>
                    </view>
                </block>
            </block>
        </view>
        <!--加载框 start-->
        <tui-loading :visible="loading"></tui-loading>
        <!--加载框 end-->
    </view>
</template>

<script>
import tuiLoading from '../../components/loading/loading';
import tuiLoadmore from '../../components/loadmore/loadmore';
import tuiNomore from '../../components/nomore/nomore';
/*
 * Author: 郭少
 * github: https://github.com/guoshao99/wallpaper-applet
 * gitee: https://gitee.com/guoshao99/wallpaper-applet
 * QQ：2549789059
 * 微信：2549789059
 */
const Constants = require('../../utils/constants');

const Api = require('../../utils/api.js');

const Rest = require('../../utils/rest');

const util = require('../../utils/util.js');

const http = require('../../utils/http.js');

let setinad;
export default {
    components: {
        tuiLoading,
        tuiLoadmore,
        tuiNomore
    },
    data() {
        return {
            pageNum: 1,
            setting: {},
            tabbar: ['浏览数', '点赞数', '下载数'],
            currentTab: 0,
            posts: [],
            loadding: false,
            pullUpOn: true,
            loaded: false,
            pagead: 4,
            pageadB: 0,
            tl_background: Api.JIANGQIE_BG_TIMELINE,
            thisPage: 'hot',

            setAD: {
                banner: '',
                videoid: '',
                gridid: '',
                customAid: '',
                customBid: '',
                customCid: ''
            },

            loading: false,
			
        };
    },
    onLoad: function (options) {
        //获取配置
        this.loadPosts(true);
    },
    onReachBottom: function () {
        if (!this.pullUpOn) {
            return;
        }

        this.loadPosts(false);
    },
    onShow() {
        let that = this;
        util.getAD(
            that,
            function () {
                that.setInterstitialAd(); //加载插屏广告
            },
            that.thisPage
        );
    },
    onHide() {
        clearInterval(setinad);
    },
    onShareAppMessage: function () {
        var that = this;
        uni.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        return {
            title: that.shares.share_title,
            imageUrl: that.shares.share_image
        };
    },
    //转发朋友圈
    onShareTimeline: function () {
        var that = this;
        return {
            title: that.shares.share_title,
            imageUrl: that.shares.share_image
        };
    },
    // 收藏
    onAddToFavorites: function () {
        var that = this;
        return {
            title: that.shares.share_title,
            imageUrl: that.shares.share_image
        };
    },
    methods: {
        

        // 获取小程序插屏广告
        setInterstitialAd: function () {
            var that = this;

            if (that.setAD.interstitialid && uni.createInterstitialAd) {
                let interstitialAd = uni.createInterstitialAd({
                    adUnitId: that.setAD.interstitialid
                }); // 监听插屏错误事件

                interstitialAd.onError((err) => {
                    console.error(err);
                }); // 显示广告

                if (interstitialAd) {
                    if (that.setAD.switch_inad == 'yes') {
                        setinad = setInterval(() => {
                            interstitialAd.show().catch((err) => {
                                console.error(err);
                            });
                        }, 2000);
                    } else {
                        setTimeout(() => {
                            interstitialAd.show().catch((err) => {
                                console.error(err);
                            });
                        }, 6000);
                    }
                }
            }
        },

        // 点击标题切换当前页时改变样式
        swichNav: function (e) {
            let cur = e.currentTarget.dataset.current;

            if (this.currentTab == cur) {
                return false;
            }

            this.setData({
                currentTab: cur,
                pageNum: 1
            });
            this.posts = [];
            this.loadPosts(true);
        },

        handlerHotArticle: function (e) {
            let post_id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/article/article?post_id=' + post_id
            });
        },

        //加载数据
        loadPosts(refresh) {
            let that = this;

            if (!refresh) {
                that.pageNum++;
            }

            that.setData({
                loadding: true
            });
            var params = {
                url: '/platform/wallpaper',
                method: 'GET',
                data: {
                    pageNum: that.pageNum,
                    pageSize: Constants.JQ_PER_PAGE_COUNT,
                    order: that.currentTab == 2 ? 3 : that.currentTab,
					isSys: 1
                },
                callBack: function (res) {
                    that.setData({
                        //loaded: true,
                        loadding: false,
                        posts: refresh ? res.data.list : that.posts.concat(res.data.list),
                        pullUpOn: !res.data.isLastPage ? true : false
                    });
                }
            };
            http.request(params);
        }
    }
};
</script>
<style>
@import './hot.css';
</style>
